<template>
	<div class="home">
		<div class="banner">
			<van-swipe ref="banner" @change="onChange" :show-indicators="false" :width="280" :loop="false">
				<van-swipe-item v-for="(item, index) in detail?.skuBarInfo?.list" :key="index">
					<van-image fit="cover" lazy-load width="270" height="405" :src="item.image" loading-icon="">
						<template v-slot:loading>
							<van-loading />
						</template>
					</van-image>
					<div class="tips">
						{{ item.label }}
					</div>
				</van-swipe-item>
			</van-swipe>
			<div v-if="detail?.skuBarInfo?.list" class="banner-two">
				<div class="act">
					<van-image
						@click="onClick(0)"
						:class="{active: current == 0}"
						width="40"
						height="40"
						round
						:src="detail.skuBarInfo?.list[0].image"
					>
						<template v-slot:loading>
							<van-loading type="spinner" size="20" />
						</template>
					</van-image>
				</div>
				<div class="text">颜色规格</div>
				<div class="van">
					<van-tabs @click="onClick" ref="tabs">
						<van-tab
							@scrollTo="onChange"
							:name="index"
							v-for="(item, index) in detail.skuBarInfo?.list"
							title-active-color="#000"
							:key="index"
							color="#FFF"
						>
							<template #title>
								<van-image :class="{active: current == index}" :key="index" width="38" height="38" round :src="item.image">
									<template v-slot:loading>
										<van-loading type="spinner" size="20" />
									</template>
								</van-image>
							</template>
						</van-tab>
					</van-tabs>
				</div>
			</div>
			<van-swipe
				v-if="detail?.orderCarousel?.list"
				class="small-banner"
				:autoplay="1000"
				:loop="true"
				:show-indicators="false"
				width="auto"
				style="height: 20px"
				vertical
			>
				<van-swipe-item v-for="(item, index) in detail?.orderCarousel?.list" :key="index">
					<van-image round width="18" height="18" :src="item.avatar" />
					<span>{{ item.text }}</span>
				</van-swipe-item>
			</van-swipe>
		</div>
		<div v-if="detail?.normalPrice" class="price">
			<div class="h">
				<div><span style="font-size: 12px">￥</span>{{ detail.normalPrice.nowPrice }}</div>
				<span
					style="background-color: rgb(255, 236, 239); color: rgb(255, 68, 102); font-size: 12px; margin-left: 5px"
					v-if="detail.normalPrice.priceTags[0]"
					>{{ detail.normalPrice.priceTags[0].text }}</span
				>
			</div>
			<div class="f">已售{{ detail.normalPriceV2.sales }}</div>
		</div>
		<div v-if="detail?.skuBarInfo?.list" class="coupon">
			<van-cell :clickable="false" @click="showCoupons" value="领卷" is-link value-class="color">
				<!-- 使用 title 插槽来自定义标题 -->
				<template #title>
					<div class="t-color">新人卷满39减3</div>
				</template>
			</van-cell>
			<van-popup class="coupons" v-model="showCoupon" position="bottom" :style="{width: '100%', height: '60%'}">
				<CouponsComponents :coupons="coupons" />
			</van-popup>
			<div @click="showCoupons" v-show="showCoupon" class="bg">
				<div class="sure">确认</div>
			</div>
		</div>
		<div class="name">
			<div class="text">{{ detail?.skuInfo?.title }}</div>
			<div class="help">
				<van-image withg="14" height="14" src="/img/detail/help_choose.png" />
				帮我选
			</div>
		</div>
		<div style="width: 100%; height: 10px; background-color: #f9f9f9"></div>
		<div class="choose">
			<van-cell @click="showChooseDetail" :clickable="false" is-link>
				<!-- 使用 title 插槽来自定义标题 -->
				<template #title>
					<span class="custom-title">选择</span>
				</template>
				<template #default>
					<span class="custom-default">
						<span v-show="chooseDetailArr.size || chooseDetailArr.color">已选： </span>
						<span v-if="detail?.skuInfo?.props[1]?.list" class="size" :class="{active: chooseDetailArr.size}"
							>{{ chooseDetail.size }}
						</span>
						<span v-if="detail?.skuInfo?.props[0]?.list" class="color" :class="{active: chooseDetailArr.color}">{{
							chooseDetail.color
						}}</span>
					</span>
				</template>
			</van-cell>
			<!-- <van-popup v-model="showChoose">内容</van-popup> -->
			<van-popup v-model="showChoose" position="bottom" :style="{height: '60%'}">
				<SpecificationComponents
					@changeGoods="changeGoods"
					@addShopping="addShopping"
					@buyNow="buyNow"
					@changeNum="changeNum"
					@changeCurrentImg="changeCurrentImg"
					:chooseDetailArr="chooseDetailArr"
					:chooseDetail="chooseDetail"
					:imgArr="detail?.skuBarInfo?.list"
					:skuInfo="detail?.skuInfo"
					:id="id"
				/>
			</van-popup>
		</div>
		<div v-if="detail?.itemServices?.columns[1].desc" class="postage">
			<van-cell @click="showChooseDetail" :clickable="false">
				<!-- 使用 title 插槽来自定义标题 -->
				<template #title>
					<span class="custom-title">{{ detail?.itemServices?.columns[1].desc }}</span>
				</template>
				<template v-if="detail.itemServices?.columns[2]?.desc" #default>
					<span class="custom-default"> {{ detail?.itemServices?.columns[2].desc }}</span>
				</template>
			</van-cell>
		</div>
		<div class="services">
			<van-cell @click="showServicesDetail" :clickable="false" is-link>
				<!-- 使用 title 插槽来自定义标题 -->
				<template #title>
					<span class="custom-title">服务</span>
				</template>
				<template #default>
					<span class="custom-default">
						<span v-for="(item, index) in detail?.itemServices?.services" :key="index"
							>{{ item.name }}<span v-if="detail?.itemServices?.services.length != index + 1"> | </span>
						</span>
					</span>
				</template>
			</van-cell>
			<!-- <van-popup v-model="showChoose">内容</van-popup> -->
			<van-popup closeable close-icon="cross" v-model="showServices" position="bottom" :style="{height: '40%'}">
				<div class="explain">服务说明</div>
				<div class="text" v-for="(item, index) in detail?.itemServices?.services" :key="index">
					<span>{{ item.name }}</span>
					<span class="desc">{{ item.content }}</span>
				</div>
			</van-popup>
		</div>
		<div style="width: 100%; height: 10px; background-color: #f9f9f9"></div>
		<van-cell class="evaluate" @click="showServicesDetail" :clickable="false" is-link>
			<!-- 使用 title 插槽来自定义标题 -->
			<template #title>
				<span class="custom-title">评价({{ detail?.rateInfo?.cRate }})</span>
			</template>
			<template #default>
				<span class="custom-default">
					评分<span class="cScore">{{ detail?.rateInfoV2?.cScore }}</span>
				</span>
			</template>
		</van-cell>
		<div class="label-list">
			<div class="label" v-for="(item, index) in detail?.rateInfoV2?.rateTags" :key="index">
				{{ item.value }}
			</div>
		</div>
		<div class="comment">
			<van-swipe @change="onChange" :show-indicators="false" :width="312" :loop="false">
				<van-swipe-item v-for="(item, index) in detail?.rateInfoV2?.list" :key="index">
					<div class="user">
						<van-image round width="41" height="41" :src="item?.user.avatar" />
						<div class="name">
							<span class="u-name">{{ item?.user.uname }}</span>
							<span>{{ createdTime[index] }}</span>
						</div>
					</div>
					<div class="text">
						{{ item.content }}
					</div>
				</van-swipe-item>
			</van-swipe>
		</div>
		<div style="width: 100%; height: 10px; background-color: #f9f9f9"></div>
		<div class="shop">
			<van-image width="63" height="63" :src="detail?.shopInfo?.shopLogo" />
			<div class="desc-shop">
				<van-cell :title="detail?.shopInfo?.name" is-link value="进店" />
				<div class="level">
					<van-icon color="#ff4466" name="star" v-for="i in detail?.shopInfo?.level" :key="i" />
				</div>
				<div class="shop-label-list">
					<div class="shop-label" v-for="(item, index) in detail?.shopInfo?.shopLabels" :key="index">
						{{ item.text }}
					</div>
				</div>
			</div>
		</div>
		<div style="width: 100%; height: 10px; background-color: #f9f9f9"></div>
		<div class="detail">
			<div class="d-title">
				<span style="color: #ff4466">图文详情</span>
			</div>
			<div class="d-img">
				<van-image v-for="(item, index) in detail?.detailInfo?.detailImage['0'].list" :key="index" :src="item" />
			</div>
		</div>

		<div class="navBar">
			<div class="btn">
				<van-icon name="shop-o" />
				<span>店铺</span>
			</div>
			<div class="btn">
				<van-icon name="chat-o" />
				<span>客服</span>
			</div>
			<div v-if="showCollect" @click="collect" class="btn">
				<van-icon name="star-o" />
				<span>收藏</span>
			</div>
			<div v-if="!showCollect" @click="collect" class="btn">
				<van-icon color="#ff4466" name="star" />
				<span>收藏</span>
			</div>
			<div @click="addShopping" class="add-shopping">加入购物车</div>
			<div @click="buyNow" class="notarize">立即购买</div>
		</div>
		<div class="nav">
			<div @click="goHome" class="go-home">
				<van-icon size="20" color="#fff" name="wap-home-o" />
			</div>
			<div @click="goShopping" class="go-shopping">
				<van-icon size="20" color="#fff" name="shopping-cart-o" />
			</div>
		</div>
	</div>
</template>

<script>
import {coupon} from "../../assets/data/coupon.js";
import CouponsComponents from "../../components/detail/CouponsComponents.vue";
import SpecificationComponents from "../../components/detail/SpecificationComponents.vue";
import {mapMutations, mapGetters} from "vuex";

export default {
	name: "GoodsDetail",

	components: {CouponsComponents, SpecificationComponents},

	data() {
		return {
			detail: {},
			coupons: coupon, //优惠卷
			current: 0,
			showCoupon: false,
			showChoose: false, //显示尺码详情
			showServices: false, //显示服务详情
			showCollect: true, //是否收藏
			num: 1,
			chooseDetailArr: {
				size: "",
				color: "",
			},
			currentImg: "",
		};
	},

	computed: {
		id() {
			return this.$route.params.id;
		},
		color() {
			let colors = this.detail.itemParams.info.set["颜色"].split(",");
			return colors;
		},
		chooseDetail() {
			let chooseData = {
				size: this.chooseDetailArr.size,
				color: this.chooseDetailArr.color,
			};
			if (!chooseData.size) {
				chooseData.size = "尺码";
			}
			if (!chooseData.color) {
				chooseData.color = "颜色";
			}
			return chooseData;
		},
		createdTime() {
			let timeArr = this.detail?.rateInfoV2?.list.map((item) => {
				let date = new Date(item.created * 1000);
				let Y = date.getFullYear() + "-";
				let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
				let D = date.getDate() + " ";
				return Y + M + D;
			});
			return timeArr;
		},
		...mapGetters("order", ["countdown"]),
	},

	created() {
		this.setOrders(this.getLocalStroge("order"));
	},

	mounted() {
		this.getDetail();
		this.getCoupon();
		//判断是否有收藏
		this.collectFlag();
	},

	methods: {
		...mapMutations(["addData"]),
		async getDetail() {
			let url = `https://apis.netstart.cn/mogujie/goods/detail`;
			// let url = `/h5/http.detail.api/1`;
			let {data} = await this.$axios(url, {params: {itemId: this.id}});
			// console.log(data);

			this.detail = data.data.result;
		},
		async getCoupon() {
			let url = `https://apis.netstart.cn/mogujie/goods/getPromotionList`;
			let {data} = await this.$axios(url, {params: {itemId: this.id}});
			// console.log(data);

			this.coupon = data.data.result;
		},
		onChange(index) {
			this.current = index;
			scrollTo;
			this.$refs.tabs.scrollTo(this.current);
		},
		onClick(name) {
			this.current = parseInt(name);
			this.$refs.banner.swipeTo(this.current);
		},
		showCoupons() {
			this.showCoupon = !this.showCoupon;
		},
		showChooseDetail() {
			console.log(this.showCoupon);
			this.showChoose = !this.showChoose;
		},
		showServicesDetail() {
			console.log(this.showCoupon);
			this.showServices = !this.showServices;
		},
		changeGoods(obj) {
			this.chooseDetailArr[obj.key] = obj.value;
		},
		collect() {
			this.showCollect = !this.showCollect;
			let collect = this.getLocalStroge("collect");
			console.log(collect);

			let params = {
				id: this.id,
				img: this.detail.skuBarInfo?.list[0].image,
				title: this.detail.skuInfo?.title,
				price: this.detail.skuInfo?.defaultPrice,
				sells: this.detail.normalPriceV2.sales,
			};

			if (!this.showCollect) {
				// console.log("collect", !collect);

				//添加收藏
				if (!collect) {
					console.log(222);
					this.setLocalStroge("collect", [params]);
				} else {
					console.log(111);
					let flag;
					if (collect) {
						flag = false;
					} else {
						flag = collect.map((item) => this.id == item.id).length == 0 ? true : false;
					}

					if (!flag) {
						let newCollect = [...collect, params];
						this.setLocalStroge("collect", newCollect);
					} else {
						console.log("该商品已经收藏了", this.id, flag);
					}
				}
			} else {
				//删除收藏
				let newCollect = collect.filter((item) => {
					return this.id != item.id;
				});
				this.setLocalStroge("collect", newCollect);
			}
		},
		collectFlag() {
			let collect = this.getLocalStroge("collect");
			let newCollect = collect.filter((item) => {
				return this.id == item.id;
			});
			if (newCollect.length == 0) {
				console.log("未收藏");

				this.showCollect = true;
			} else {
				console.log("已经收藏过了");
				this.showCollect = false;
			}
		},
		changeNum(num) {
			this.num = num;
		},
		changeCurrentImg(currentImg) {
			this.currentImg = this.detail.skuBarInfo?.list[currentImg];
		},

		addShopping(flag) {
			let have = this.chooseDetailArr.size && this.chooseDetailArr.color;
			if (this.detail.skuInfo?.props[0]?.list) {
				have = this.chooseDetailArr.color;
			}
			if (this.detail.skuInfo?.props[1]?.list) {
				have = this.chooseDetailArr.size;
			}
			if (have) {
				//购物车缓存数据
				if (localStorage.getItem("shopCar")) {
					let arr = this.getLocalStroge("shopCar");
					for (let i = 0; i < arr.length; i++) {
						//判断是否是同一个店铺
						if (this.detail.shopInfo.name == arr[i].shop) {
							let arr2 = arr[i].goods;
							//判断是否是同一商品
							for (let j = 0; j < arr2.length; j++) {
								if (arr2[j].id == this.id) {
									// 判断商品颜色尺寸是否相等
									if (arr2[j].color != this.chooseDetailArr.color || arr2[j].size != this.chooseDetailArr.size) {
										arr[i].goods.unshift({
											id: this.id,
											title: this.detail.skuInfo.title,
											price: this.detail.skuInfo.defaultPrice,
											size: this.chooseDetailArr.size,
											color: this.chooseDetailArr.color,
											num: this.num,
											image: this.currentImg,
										});
										this.setLocalStroge("shopCar", arr);
									} else {
										arr[i].goods[j].num += 1;
										this.setLocalStroge("shopCar", arr);
									}
									return;
								} else if (j == arr2.length - 1) {
									arr[i].goods.unshift({
										id: this.id,
										title: this.detail.skuInfo.title,
										price: this.detail.skuInfo.defaultPrice,
										size: this.chooseDetailArr.size,
										color: this.chooseDetailArr.color,
										num: this.num,
										image: this.currentImg,
									});
									this.setLocalStroge("shopCar", arr);
								}
							}
							return;
						} else if (i == arr.length - 1) {
							this.setLocalStroge("shopCar", [
								{
									shop: this.detail.shopInfo.name,
									goods: [
										{
											id: this.id,
											title: this.detail.skuInfo.title,
											price: this.detail.skuInfo.defaultPrice,
											size: this.chooseDetailArr.size,
											color: this.chooseDetailArr.color,
											num: this.num,
											image: this.currentImg,
										},
									],
								},
								...this.getLocalStroge("shopCar"),
							]);
						}
					}
				} else {
					this.setLocalStroge("shopCar", [
						{
							shop: this.detail.shopInfo.name,
							allFlag: false,
							goods: [
								{
									flag: false,
									id: this.id,
									title: this.detail.skuInfo.title,
									price: this.detail.skuInfo.defaultPrice,
									size: this.chooseDetailArr.size,
									color: this.chooseDetailArr.color,
									num: this.num,
									image: this.currentImg,
								},
							],
						},
					]);
				}
			} else {
				this.$toast("请选择商品规格");
				console.log(flag);
				this.showChooseDetail();
			}
		},
		buyNow() {
			let have = this.chooseDetailArr.size && this.chooseDetailArr.color;
			if (this.detail.skuInfo?.props[0]?.list) {
				have = this.chooseDetailArr.color;
			}
			if (this.detail.skuInfo?.props[1]?.list) {
				have = this.chooseDetailArr.size;
			}
			if (have) {
				let goodsObj = {
					id: this.id,
					shop: this.detail.shopInfo.name,
					title: this.detail.skuInfo.title,
					price: this.detail.skuInfo.defaultPrice,
					chooseDetailArr: this.chooseDetailArr,
					num: this.num,
					image: this.currentImg,
				};
				let goodsArr = [
					{
						shop: this.detail.shopInfo.name,
						goods: [goodsObj],
					},
				];
				this.$router.push({name: "order-detail", query: {id: this.id, goodsArr: JSON.stringify(goodsArr)}});
			} else {
				this.$toast("请选择商品规格");
				this.showChooseDetail();
			}
		},
		goHome() {
			console.log(111);
			this.$router.push({name: "home"});
		},
		goShopping() {
			this.$router.push({name: "shoppingCar"});
		},
		...mapMutations("order", ["setOrders"]),
	},
	watch: {
		id(newID, oldID) {
			if (newID !== oldID) {
				this.detail = {}; // 把旧的数据先清空，
				this.current = 0;
				// this.showCollect = true; //是否收藏
				this.showCoupon = false;
				this.showChoose = false; //显示尺码详情
				this.chooseDetailArr = {
					size: "",
					color: "",
				};
				this.getDetail();
			}
		},
	},
	beforeRouteLeave(to, from, next) {
		console.log(this.countdown);

		if (this.countdown) {
			console.log(from);
			console.log(to.name);
			console.log(next);
			if (to.name == "order-detail") {
				this.$toast("当前存在未支付的订单，请前往订单页面支付");
				next(false);
			} else {
				next();
			}
		} else {
			next();
		}
	},
};
</script>

<style lang="scss" scoped>
.home {
	position: relative;
	background-color: #fff;
}
.nav {
	position: absolute;
	right: 0;
	top: 40px;
	.go-home {
		width: 42px;
		height: 42px;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		margin-bottom: 10px;
		display: flex;
		// flex-direction: column;
		align-content: center;
		justify-content: center;
		line-height: 42px;
		.van-icon {
			margin-top: 10px;
		}
	}
	.go-shopping {
		width: 42px;
		height: 42px;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		margin-bottom: 10px;
		display: flex;
		// flex-direction: column;
		align-content: center;
		justify-content: center;
		line-height: 42px;
		.van-icon {
			margin-top: 12px;
		}
	}
}
.banner {
	margin-top: 10px;
	padding: 0 5px;
	position: relative;
	.tips {
		position: absolute;
		bottom: 13px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		padding: 4px 10px;
		border-radius: 10px;
		color: #fff;
		font-size: 12px;
		background-color: rgba(0, 0, 0, 0.5);
		max-width: 240px;
		white-space: nowrap;
	}
	.banner-two {
		padding-top: 15px;
		margin-left: 15px;
		border-bottom: 1px solid #e5e5e5;
		position: relative;
		display: flex;
		align-items: center;
		// overflow: hidden;

		.text {
			font: 400 14px/1.5 Arial;
			font-size: 12px;
			color: #999;
			width: 60px;
			text-align: center;
			margin-left: 10px;
			width: 30px;
		}
		.van {
			max-width: 78%;
			.van-tabs {
				height: 59px;
			}
		}
	}
	.small-banner {
		position: absolute;
		top: 25px;
		left: 12px;
		border-radius: 10px;
		height: 100%;
		color: #fff;
		font-size: 12px;
		padding: 0 5px;
		// opacity: 0;
		span {
			vertical-align: text-bottom;
			line-height: 21px;
			margin-right: 15px;
		}
		.van-swipe-item {
			width: fit-content;
			span {
				text-align: center;
				display: block;
				height: 18px;
				background-color: rgba(0, 0, 0, 0.7);
				padding: 0 5px 0 20px;
				border-radius: 10px;
				transform: translateX(0px);
			}
		}
	}

	::v-deep .van-tabs__line {
		display: none;
	}
	::v-deep .van-tabs__nav {
		margin-top: 6px;
		.van-tab {
			margin-left: 5px;
		}
	}
	::v-deep .van-image {
		box-sizing: border-box;
		&.active {
			border: 2px solid red;
		}
	}
}
.price {
	padding: 10px 15px;
	display: flex;
	justify-content: space-between;
	font-size: 25px;
	color: #333;
	font-weight: bolder;
	align-items: center;
	.h {
		display: flex;
		align-items: center;
	}
	.f {
		font-size: 14px;
		color: #666;
		font-weight: 100;
	}
}
.coupon {
	.t-color {
		width: 93px;
		height: 18px;
		line-height: 18px;
		background-color: #f25463;
		color: #fff;
		text-align: center;
		border-radius: 5px;
	}

	.van-cell {
		font-size: 12px;
		color: #f25463;
	}

	::v-deep .van-cell__right-icon {
		color: #f25463;
	}
	.color {
		color: #f25463;
	}
	.bg {
		width: 100%;
		background-color: #fff;
		height: 60px;
		z-index: 3000;
		position: absolute;
		bottom: 0;
		.sure {
			width: 90%;
			height: 42px;
			border-radius: 10px;
			color: #fff;
			font-size: 0.28rem;
			margin: 10px auto;
			background-image: -webkit-gradient(linear, left top, right top, from(#f46), to(#ff468f));
			background-image: -webkit-linear-gradient(left, #f46, #ff468f);
			background-image: linear-gradient(90deg, #f46, #ff468f);
			text-align: center;
			line-height: 42px;
			font-size: 15px;
		}
	}
}
.name {
	display: flex;
	justify-content: space-between;
	padding: 0 15px;
	align-items: center;
	.text {
		width: 80%;
		height: 43px;
		font-size: 15px;
		line-height: 21px;
	}
	.help {
		color: #999;
		background-color: #f8f8f8;
		padding: 0 12px 0 14px;
		font-size: 12px;
		height: 25px;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
		font-size: 13px;
		white-space: nowrap;
		line-height: 25px;
		vertical-align: text-bottom;
	}
}

.choose {
	.van-cell__title {
		flex: none;
		margin-right: 10px;
		font-size: 14px;
		color: #999999;
	}
	.van-cell__value {
		flex: 1;
		text-align: left;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.custom-default {
		.active {
			flex: 1;
			text-align: left;
			color: #f46;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	::v-deep .van-popup {
		background-color: transparent;
	}
	// ::v-deep .van-popup__close-icon--top-right {
	// 	top: 29px;
	// 	right: 16px;
	// }
}
.postage {
	.van-cell__title {
		flex: none;
		margin-right: 10px;
		font-size: 14px;
		color: #999999;
	}
	.van-cell__value {
		font-size: 14px;
		color: #999999;
	}
}
.services {
	.van-cell__title {
		flex: none;
		margin-right: 10px;
		font-size: 14px;
		color: #999999;
	}
	.van-cell__value {
		flex: 1;
		text-align: left;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 12px;
	}
	.explain {
		font-size: 17px;
		line-height: 45px;
		text-align: center;
		color: #999;
	}
	.text {
		color: #333;
		font-size: 14.5px;
		line-height: 20px;
		font-weight: 500;
		width: 100%;
		min-height: 52px;
		padding: 10.4px 15px;
		border-bottom: 1px solid #ededed;
		.desc {
			display: block;
			font-size: 12.48px;
			line-height: 17.16px;
			color: #999;
		}
	}
}

.evaluate {
	.custom-title {
		font-size: 15.6px;
		color: #333;
		font-weight: 700;
	}
	.custom-default {
		font-size: 15.6px;
		color: #333;
		font-weight: 700;
		.cScore {
			color: rgb(255, 68, 102);
			display: inline-block;
		}
	}
}
.label-list {
	max-height: 33.28px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	padding: 0 15px;
	.label {
		display: inline-block;
		height: 25px;
		line-height: 25px;
		border-radius: 4px;
		font-size: 12px;
		padding: 0 10px;
		margin-right: 5px;
		margin-top: 8px;
		background-color: #fff6f6;
	}
}

.comment {
	padding: 10px 0;

	.van-swipe-item {
		margin-right: 10px;
		background-color: #fafafa;
		height: 112px;
		.user {
			display: flex;
			padding: 10px 15px;
			.name {
				display: flex;
				flex-direction: column;
				span {
					font-size: 11.44px;
					color: #999;
				}
				.u-name {
					font-size: 14.56px;
					color: #333;
					line-height: 17.16px;
					font-weight: 700;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
		.text {
			padding: 10px 15px;
			text-align: left;
			line-height: 19.24px;
			font-size: 13.52px;
			word-break: break-all;
		}
	}
}
.shop {
	display: flex;
	padding: 10px 15px;
	.desc-shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 8px;
		.van-cell {
			height: 23px;
			font-size: 14px;
			padding: 0;
			// background-color: #f6f6f6;
		}
		.level {
			font-size: 12px;
		}
		.shop-label-list {
			display: flex;
			justify-content: start;
			margin-top: 4px;
			.shop-label {
				display: inline-block;
				height: 17.68px;
				line-height: 17.68px;
				padding: 0 7px;
				border-radius: 7px;
				border: 1px solid #d6d6d6;
				margin-right: 7px;
				font-size: 12px;
				color: #ff468f;
			}
		}
	}
}

.detail {
	text-align: center;
	height: 52px;
	line-height: 52px;
	font-size: 18px;
}
.navBar {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 52px;
	background-color: #fff;
	display: flex;
	.btn {
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 15%;
		justify-content: center;
		// align-items: center;
	}
	.notarize {
		width: 27.5%;
		text-align: center;
		line-height: 52px;
		background-color: #ff4a89;
		color: #fff;
		z-index: 99;
	}
	.add-shopping {
		width: 27.5%;
		text-align: center;
		line-height: 52px;
		background-color: #ffecef;
		color: #ff4466;
		z-index: 99;
	}
}
</style>
